<template>
	<view class="songlist">
		<view @tap="changeMusicInfo(index)" class="list-item" v-for="(item, index) in simiSongInfoList" :key="index">
			<view class="numberWrap">
				<view class="numberBadge" v-if="bageType === 'number'" >{{index + 1}}</view>
				<view class="picBadge" v-if="bageType === 'picture'"><image :src="item.album.picUrl" mode="scaleToFill"></image></view>
			</view>
			<view class="songInfo">
				<view class="nameWrap">
					<view class="songname">{{item.name}}</view>
				</view>
				<view class="descWrap">
					<view class="description">{{item.album.artists[0].name}}—{{item.album.name}}</view>
				</view>
			</view>
			<view class="playBtn">
				<i :class="item.icon"></i>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: "songsheet",
		props: {
			bageType: {
				type: String,
				default: 'number'
			},
			simiSongInfoList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			...mapState(['globalPlayStatus', 'curTapIndex', 'globalPlayList', 'curMusicInfo'])
		},
		watch:{
			simiSongInfoList(){
				console.log('simiSongInfoList:', this.simiSongInfoList);
			}
		},
		methods:{
			...mapMutations(['changePlayStatus', 'changeStopStatus', 'changeCurMusicInfo', 'changeCurTapIndex', 'changeGlobalPlayList']),
			changeMusicInfo(index){
				let mid = this.simiSongInfoList[index].id
				this.playSong(index)
				uni.redirectTo({
					url: `/pages/play/play?mid=${mid}`
				});
			},
			playSong(index){
				let musicInfo = this.simiSongInfoList[index]
				this.$player.title = musicInfo.name
				this.$player.singer = musicInfo.artists[0].name
				this.$player.coverImgUrl = musicInfo.album.picUrl
				this.$player.src =  `https://music.163.com/song/media/outer/url?id=${musicInfo.id}.mp3`
			}
		},
		
	}
</script>

<style lang="scss" scoped>

.picBadge {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 5px;
	overflow: hidden;
	image {
		width: 100%;
		height: 100%;
	}
}

.songlist {
	height: 80%;
	padding-left: 10px;
	// background: rgba(117, 117, 117, 0.03);
	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 130rpx;
		.numberWrap {
			width: 10%;
			display: inline-block;
			text-align: center;
			.numberBadge {
				color: rgba(255, 255, 255, 0.47);
				padding-left: 30rpx;
				font-size: 36rpx;
			}
		}
		.songInfo {
			width: 60%;
			display: inline-block;
			.nameWrap {
				display: flex;
				justify-content: flex-start;
				.songname {
					font-size: 33rpx;
					font-weight: 500;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					color: rgba(255, 255, 255, 0.96);
				}
			}
			.descWrap {
				display: flex;
				justify-content: flex-start;
				.description {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 24rpx;
					color: rgba(119, 210, 226, 0.93);
				}
			}
		}
		.playBtn {
			width: 20%;
			display: inline-block;
			.iconfont {
				color: rgba(239, 222, 237, 0.58);
				font-size: 56rpx;
				margin-left: 55rpx;
			}
		}
	}
}

</style>
